<template>
  <el-select v-model="serviceValue" placeholder="服务" @change="serviceChange">
    <el-option
      v-for="item in services"
      :key="item.service_name"
      :label="item.service_name"
      :value="item.service_name"
    />
  </el-select>

  <el-select v-model="methodValue" placeholder="方法" @change="methodChange">
    <el-option
      v-for="item in methods"
      :key="item.method_name"
      :label="item.method_name"
      :value="item.method_name"
    />
  </el-select>

  <el-button type="primary" @click="invoke">提交</el-button>
  <br />
  <br />

  请求:
  <div id="editor_holder" style="background-color: rgba(250, 250, 250, 0.5)"></div>

  <br />
  回复:
  <div>
    <json-viewer :value="jsonData" :expand-depth="5" copyable boxed sort></json-viewer>
  </div>
</template>

<script>
import axios from "axios";
import { ElNotification } from "element-plus";
//import (*) from '@json-editor/json-editor'

export default {
  data() {
    return {
      serviceValue: "",
      services: [
        {
          service_name: "serv",
          methods: [
            {
              //method_name: "getName",
            },
          ],
        },
      ],

      methodValue: "",
      methods: [
        {
          // method_name: "getA",
        },
      ],

      jsonEditor: null,
      jsonData: {},
    };
  },

  methods: {
    getServiceList() {
      let pThis = this;
      axios
        .get("/api/services", {})
        .then(function (response) {
          pThis.services = response.data;
        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          // 总是会执行
        });
    },

    serviceChange(val) {
      console.log(val);

      this.services.forEach((element) => {
        if (element.service_name == val) {
          this.methods = element.methods;
        }
      });
    },
    methodChange(val) {
      console.log(this.serviceValue, this.methodValue);
      if (
        typeof this.serviceValue == "undefined" ||
        typeof this.methodValue == "undefined"
      ) {
        return;
      }

      if (this.serviceChange.length > 0 && this.methodValue.length > 0) {
        let pThis = this;

        axios
          .get(`/api/jsonSchema/${this.serviceValue}/${this.methodValue}`, {})
          .then(function (response) {
            console.log(response);

            console.log(response.data);

            // Initialize the editor
            pThis.jsonEditor = new window.JSONEditor(
              document.getElementById("editor_holder"),
              {
                schema: response.data,
              }
            );
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // 总是会执行
          });
      }
    },

    invoke() {
      if (typeof this.jsonEditor == "undefined") {
        return;
      }

      var validation_errors = this.jsonEditor.validate();
      // Show validation errors if there are any
      if (validation_errors.length) {
        ElNotification({
          title: "Warning",
          message: JSON.stringify(validation_errors, null, 2),
          type: "warning",
          position: "bottom-right",
        });
        return;
      }

      let json = this.jsonEditor.getValue();

      let value = JSON.stringify(json, null, 2);

      console.log(value);

      /////////////////////////////////////////////////////////////////////////////////////////
      if (
        typeof this.serviceValue == "undefined" ||
        typeof this.methodValue == "undefined"
      ) {
        return;
      }

      if (this.serviceChange.length > 0 && this.methodValue.length > 0) {
        let pThis = this;

        axios
          .post(`/api/invoke/${this.serviceValue}/${this.methodValue}`, json)
          .then(function (response) {
            console.log(response.data);

            pThis.jsonData = response.data;
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // 总是会执行
          });
      }
    },
  },

  mounted() {
    this.getServiceList();
  },
};
</script>
